<script setup lang='ts'>
import axios, { type AxiosResponse } from 'axios';
import { onMounted, ref } from 'vue';

type imgs = {
    imgUrl: string
}[]

interface imgList {
    code: string
    msg: string
    result: imgs
}

const list = ref<imgs>([])
// 获取轮播图数据
const getBanner = async () => {
    const res = await axios.get<null, AxiosResponse<imgList>>("https://meikou-api.itheima.net/home/banner")
    list.value = res.data.result
}
onMounted(() => {
    getBanner()
})
</script>

<template>
    <div class="container">
        <img v-for="(item, key) in list" :src="item.imgUrl" alt="" :key="item.imgUrl">
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 200px;
    display: flex;
}

.container img {
    width: 100px;
    height: 50%;
    margin: 10px 20px;
}
</style>
<!-- <script setup lang='ts'>
import axios, { type AxiosResponse } from 'axios';
import { onMounted, ref } from 'vue';

interface imgs {
    imgUrl: string
}

interface imgList {
    code: string
    msg: string
    result: imgs[]
}

const list = ref<imgs[]>([])
// 获取轮播图数据
const getBanner = async () => {
    const res = await axios.get<null, AxiosResponse<imgList>>("https://meikou-api.itheima.net/home/banner")
    list.value = res.data.result
}
onMounted(() => {
    getBanner()
})
</script>

<template>
    <div class="container">
        <img v-for="(item, key) in list" :src="item.imgUrl" alt="" :key="item.imgUrl">
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 200px;
}

.container img {
    width: 300px;
    height: 100%;
    margin: 10px 20px;
}
</style> -->